/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="feature_visual__container">
        <div class="feature_visual__title">
            <lang>特征可视化</lang>
            <sf-fieldtip>
                <lang>在完成所有特征处理步骤的添加和编辑后，可以选择一个X轴和一个Y轴字段，以可视化图表的形式展示处理结果。</lang>
            </sf-fieldtip>
        </div>
        <sf-form ref="form"
                 class="visual-form"
                 :label-width="90">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>X轴字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="xField"
                           :default-width="fieldWidth"
                           :allow-search="true"
                           :allow-blank="false"
                           :options="fieldList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>Y轴字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="yField"
                           :default-width="fieldWidth"
                           :allow-search="true"
                           :allow-blank="false"
                           type="multi"
                           :options="fieldList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>可视化形式</lang>
                </sf-fieldlabel>
                <sf-select v-model="chartType"
                           :default-width="fieldWidth"
                           :allow-search="true"
                           :allow-blank="false"
                           :placeholder="_('请选择')"
                           :options="chartTypeList" />
            </sf-form-item>
            <sf-button-primary class="select-chart"
                               @click.native="_generalCharts">
                <lang>生成图表</lang>
            </sf-button-primary>
        </sf-form>
        <div class="chart__container">
            <empty-panel
                v-if="!nullCharts"
                :title="_('暂时没有可以预览的可视化图表')"
                :text="_('请在左侧选择X轴、Y轴字段以及可视化方式')"
                :small="true" />
            <div v-else
                 ref="charts"
                 class="charts">
            </div>
        </div>
    </div>
</template>
<script lang=ts>

const FIELD_WIDTH = 182;

import { Component, Vue, Ref } from 'vue-property-decorator';
import EmptyPanel from 'src/components/empty_panel.vue';
import echarts, { ECharts, EChartOption } from 'echarts';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'FeatureVisual',
    components:{
        EmptyPanel
    }
})
export default  class FeatureVisual extends Vue {

    @Ref() form!: SfForm
    @Ref() charts!: HTMLDivElement

    xField = ''

    // TODO: REMOVE ANY
    yField: string[] = []
    chartType = ''

    // TODO: REMOVE ANY
    fieldList: string[] = []

    // TODO: REMOVE ANY
    previewList: SafeAny[] = []
    chartTypeList = [ {
        label:_('折线图'),
        value:'line'
    }, {
        label:_('柱状图'),
        value:'bar'
    }]
    nullCharts = false
    chartContainer: ECharts | null = null

    get fieldWidth () {
        return FIELD_WIDTH;
    }

    get isFormValid () {
        return this.form.isValid();
    }

    _generalCharts () {
        if (!this.isFormValid) {
            return;
        };
        this.nullCharts = true;
        this.chartContainer = null;
        let options: EChartOption = {};
        let xData = this.previewList.map(item=> item[this.xField]);
        /* eslint-disable */
        options = {
            tooltip: {
                trigger: 'axis',
                backgroundColor:'#fff',
                padding:10,
                borderWidth:1,
                borderColor:'#ddd',
                textStyle:{
                    color:'#5C5C5C'
                },
            },
            grid: {
                left: '4%',
                right: '4%',
                bottom: '5%',
                top: '7%',
                containLabel: true
            },
            color:['#3366FF','#13C2C1'],
            xAxis: [
                {
                    type: 'category',
                    data: xData,
                    axisTick:{
                        show:false
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#eee'
                        }
                    },
                    axisLabel:{
                        color:'#14161A'
                    },
                    splitLine:{
                        lineStyle:{
                            color:['#eee']
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    }
                }
            ],
            series: []

        };
        let seriesData = [];
        for (let i = 0; i < this.yField.length; i++) {
            let yField = this.yField[i];
            let seriesObj = {
                name:yField,
                type:this.chartType,
                data:this.previewList.map(item=> +item[yField]),
                barWidth:201
            }
            // @ts-ignore
            seriesData.push(seriesObj);

        }
        // options.legend = this.yField;
        options.series = seriesData;
        this.$nextTick(()=>{
            this.chartContainer = echarts.init(this.charts);
            this.chartContainer.setOption(options);
        })
    }

    beforeDestroy() {
        this.chartContainer!.dispose();
        this.chartContainer = null;
    }
};
</script>
<style lang="less">
    .feature_visual__container{
        display: flex;
        padding: 16px 32px;
        padding-right: 20px;
        .feature_visual__title{
            position: absolute;
            top:15px;
            font-size: 16px;
            color: #14161a;
        }
        .visual-form{
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            width: 200px;
            margin-right: 8px;
            padding: 16px 8px;
            .sfv-fieldlabel-left{
                padding-left: 0;
            }
            .sfv-form-item{
                margin-bottom: 10px;
            }
        }
        .select-chart{
            width: 184px;
            margin-top: 155px;
        }
        .chart__container{
            width: 688px;
            height: 444px;
            border: 1px solid #E0E0E0;
            .charts{
                width: 100%;
                height: 100%;
            }
        }

    }

</style>
